<template>
    <div class="page">
        <p class="welcome">Hi Welcome Back</p>
        <img src="@/assets/images/loginCat.png" class="Cat">
        <div class="loginBK">
            <div class="login_Content">
                <!-- 账号 -->
                <div class="userid">
                    <p class="title">用户名</p>
                    <input type="text" v-model="userLoginInfo.userName" placeholder="请输入用户名" />
                </div>
                <!-- 密码 -->
                <div class="password">
                    <p class="title">密码</p>
                    <input type="password" v-model="userLoginInfo.password" placeholder="请输入密码" />
                </div>

                <!-- 移动到 login_Content 内部 -->
                <div class="signIn" @click="goSignin">
                    <span>登录</span>
                </div>
                <div class="signUp" @click="goSignUp">
                    <span>注册</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
defineOptions({
    name: 'LoginPage'
})

import { reactive } from "vue";
import { useRouter } from "vue-router";
import { getUserLogin } from "./api/login";
import { showToast } from "vant";
import { useUserStore } from "@/stores/user";

const router = useRouter();
const userStore = useUserStore();

const userLoginInfo = reactive({
    userName: '',
    password: ''
})


//登录
const goSignin = async () => {
    // 用户名正则：4-16位字母、数字、下划线
    const usernameRegex = /^[a-zA-Z0-9_]{5,16}$/;
    // 密码正则：6-16位字母、数字、特殊字符
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;

    if (userLoginInfo.userName === '') {
        showToast('请输入用户名');
    } else if (!usernameRegex.test(userLoginInfo.userName)) {
        showToast('用户名必须包含字母、数字或下划线，长度在5到16个字符之间');
    } else if (userLoginInfo.password === '') {
        showToast('请输入密码');
    } else if (!passwordRegex.test(userLoginInfo.password)) {
        showToast('密码必须包含大小写字母和数字，长度在8到16个字符之间');
    } else {
        try {
            const res = await getUserLogin(userLoginInfo);
            if (res.data.code === 200) {
                // 只需要设置 Pinia store 即可，persist 会自动处理持久化
                userStore.setToken(res.data.data.token);
                userStore.setUseInfo(res.data.data.user);
                showToast('登录成功');
                router.push('/home');
            } else {
                showToast(res.data.message || '登录失败');
            }
        } catch (error) {
            console.error('登录错误:', error);
            showToast('登录请求失败');
        }
    }
}

const goSignUp = () => {
    router.push('/regist');
}

</script>

<style lang="scss" scoped>
.page {
    background-color: #8D9F5E;
    border-radius: 45px 45px 0 0;
    width: 100%;
    height: 100vh;
    position: relative;

    .welcome {
        font-size: 31px;
        width: 176.16px;
        position: absolute;
        top: 47.95px;
        left: 31.31px;
        color: #fff;
    }

    .Cat {
        position: absolute;
        left: 156.58px;
        top: 68.5px;
        width: 181.68px;
        height: 134.07px;
    }

    .loginBK {
        position: absolute;
        top: 195.62px;
        background-color: rgba(104, 57, 49, 1);
        width: 100%;
        height: 20px;
        border-radius: 40px 40px 0 0;
    }

    .login_Content {
        position: absolute;
        top: 3.56px;
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: calc(100vh - 195.62px);
        border-radius: 25px 25px 0 0;
        overflow-y: auto;

        .title {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 21.22px;
            color: rgba(141, 159, 94, 1);
        }

        .userid,
        .password {
            input {
                width: 335px;
                height: 48px;
                background: transparent;
                border: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.38);
                padding: 0 15px;
                margin-top: 8px;
                font-size: 14px;
                color: #333;
                outline: none;

                &::placeholder {
                    color: #999;
                }

                &:focus {
                    border-bottom: 2px solid #8D9F5E;
                    background: transparent;
                }
            }
        }

        .userid {
            position: absolute;
            top: 55.14px;
            left: 20px;
            height: 100px;
        }

        .password {
            position: absolute;
            left: 20px;
            top: 150px;
        }

        .signIn,
        .signUp {
            position: absolute;

            width: 335px;
            height: 48px;
            border-radius: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            span {
                color: #fff;
                font-size: 16px;
            }

            &:active {
                opacity: 0.8;
            }
        }

        .signIn {
            left: 20px;
            top: 250px;
            background: rgba(141, 159, 94, 1);
            box-shadow: 0px 14px 17px rgba(141, 159, 94, 0.6);
        }

        .signUp {
            left: 20px;
            top: 320px;
            background: rgba(173, 173, 173, 0.29);
        }
    }
}
</style>